<template>
	<div class="tuanduirenzheng">
		<div class="breadcrumb">
			<span @click="$router.back()">
				<i class="el-icon-arrow-left"></i>返回上一页
			</span>
		</div>
		<div class="pageContent">
			<div class="contentHeader">成员个人信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;margin-bottom: 0;">
				<div>
					<el-form :model="pageData" v-if="pageData" class="demo-form-inline" label-width="12rem">
						<el-form-item label="姓名：">
							<el-input v-model="pageData.name" disabled class="ainput" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item label="工号：">
							<el-input v-model="pageData.jobNumber" disabled class="ainput" placeholder="工号"></el-input>
						</el-form-item>
						<el-form-item label="手机号码：">
							<el-input v-model="pageData.phone" disabled class="ainput" placeholder="手机号码"></el-input>
						</el-form-item>
						<!-- <el-form-item label="主团队：">
							<el-input v-model="pageData.cardId" disabled class="ainput" placeholder="主团队"></el-input>
						</el-form-item> -->
						<!-- <el-form-item label="职务：">
							<el-input v-model="pageData.cardId" disabled class="ainput" placeholder="职务"></el-input>
						</el-form-item> -->
						<!-- <el-form-item label="职级：">
							<el-input v-model="departmentName" disabled class="ainput" placeholder="职级"></el-input>
						</el-form-item> -->
						<el-form-item label="岗位：">
							<el-input v-model="postText" disabled class="ainput" placeholder="岗位"></el-input>
						</el-form-item>
						<el-form-item label="服务范围：">
							<el-input v-model="addText" disabled type="textarea" class="ainput" placeholder="服务范围"></el-input>
						</el-form-item>
						<el-form-item label="身份信息：">
							<el-input v-model="pageData.cardId" disabled class="ainput" placeholder="身份信息"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<el-image :src="pageData.head?pageData.head:$globalData.defaultImg" fit="cover" class="renzhengImgs"></el-image>
			</div>

			<div class="basicInformation flex" style="padding-left: 14rem;justify-content: space-between;">
				<div>
					<img :src="pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front.png')" class="InformationImgs"
					 alt="">
					<!-- <el-image :src="pageData.cardFront?pageData.cardFront:require('@/assets/image/working/front.png')" fit="cover" class="InformationImgs"></el-image> -->
				</div>
				<div>
					<img :src="pageData.cardReverse?pageData.cardReverse:require('@/assets/image/working/reverse.png')" class="InformationImgs"
					 alt="">
					<!-- <el-image :src="pageData.cardReverse?pageData.cardReverse:require('@/assets/image/working/reverse.png')" fit="cover" class="InformationImgs"></el-image> -->
				</div>
				<div>
					<img :src="pageData.holdingCard?pageData.holdingCard:require('@/assets/image/working/hand.png')" class="InformationImgs"
					 alt="">
					<!-- <el-image :src="pageData.holdingCard?pageData.holdingCard:require('@/assets/image/working/hand.png')" fit="cover" class="InformationImgs"></el-image> -->
				</div>
			</div>
			<div class="contentHeader">加入部门信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;margin-bottom: 0;">
				<div v-if="pageData">
					<el-form :model="pageData" class="demo-form-inline" label-width="14rem">
						<el-form-item label="调入团队：">
							<el-input v-model="currentCompanyName" disabled class="ainput" placeholder="调入团队"></el-input>
							<!-- <el-select v-model="pageData.cardId" class="ainput" placeholder="请选择">
							    <el-option label="item.label" value="item.value"></el-option> 
								</el-select> -->
						</el-form-item>
						<el-form-item label="调入部门：">
							<el-select v-model="postData.departmentId" class="ainput" placeholder="请选择">
								<el-option v-for="item in companyDataList" :key="item.id" :label="item.labelName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="renzhengImgs"></el-image> -->
			</div>
			<div v-if="pageData.mainCompany">
				<div class="contentHeader">主团队基本信息</div>
				<div class="basicInformation flex" style="justify-content: space-between;margin-bottom: 0;">
					<div>
						<el-form :model="pageData" class="demo-form-inline" label-width="14rem">
							<el-form-item label="主团队：">
								<el-input v-model="pageData.mainCompany.companyName" disabled class="ainput" placeholder="主团队"></el-input>
							</el-form-item>
							<el-form-item label="组织机构代码：">
								<el-input v-model="pageData.mainCompany.organizationCode" disabled class="ainput" placeholder="组织机构代码"></el-input>
							</el-form-item>
							<el-form-item label="服务范围：">
								<el-input v-model="pageData.mainCompany.registeredAddress" disabled class="ainput" placeholder="服务范围"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<el-image :src="pageData.mainCompany.companyLogo?pageData.mainCompany.companyLogo:$globalData.defaultImg" fit="cover"
					 class="renzhengImgs"></el-image>
				</div>
				<div v-if="pageData.mainCompany.organizationCode!='暂无组织机构代码'">
					<div class="InformationUploadTip" v-if="pageData.mainCompany.checkState!='SUCCESS'">该企业暂未完成平台认证</div>
					<div class="InformationUploadTip" v-else>该企业于<span>{{ pageData.mainCompany.approveDate }}</span>完成平台认证</div>
				</div>
				<div class="InformationUploadTip" v-else></div>
			</div>
			
			
			<div class="contentHeader">成员就职信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<!-- <div> -->
				<el-form class="demo-form-inline" label-width="14rem" style="width: 100%">
					<el-form-item label="就职记录：">
						<el-table :data="takeTableData" border style="width: 100%">
							<el-table-column prop="startTime" label="入职时间"></el-table-column>
							<el-table-column prop="outTime" label="离职时间"></el-table-column>
							<el-table-column prop="companyName" label="团队及部门"></el-table-column>
							<!-- <el-table-column prop="address" label="职务"></el-table-column> -->
						</el-table>
					</el-form-item>
				</el-form>
			</div>

		</div>

		<div class="hanlderBtns">
			<el-button round type="primary" class="hanlderBtnsFunc" @click="auditPass" :disabled="btnDisabled">审核通过</el-button>
			<el-button round type="danger" class="hanlderBtnsFunc" @click="auditNotGo" :disabled="btnDisabled">审核不通过</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				userId: '',
				companyId: '',
				pageData: '',
				currentCompanyName: '', // 当前所操作的公司名称
				companyDataList: '', // 公司数据
				postData: {
					// 审核提交数据
					departmentId: '',
					id: '',
					companyId: ''
				},
				takeTableData: [], // 就职记录数据
				departmentName: '', // 职级
				postText: '', // 岗位
				addText: '' ,// 地址
				btnDisabled: false
			}
		},
		mounted() {
			this.userId = this.$route.params.id
			this.postData.companyId = this.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			this.currentCompanyName = this.$store.state.company.companyName
			this.getPageData()
			this.getDepartmentByCompanyId()
		},
		methods: {
			getPageData() {
				// 获取页面数据
				this.$request.postForm(this.$api.getDetails, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
							this.pageData = res.data
						if (this.pageData) {
							//职级
							if (!this.pageData.rankNameEntityList) {
								this.departmentName = ''
							} else {
								this.departmentName = this.pageData.rankNameEntityList.departmentName
							}
							// 岗位
							let postList = []
							this.pageData.postEntityList.forEach((v) => {
								postList.push(v.labelName)
							})
							this.postText = postList.join(',')
							// 地址
							this.pageData.areaEntityList.forEach((v) => {
								this.addText = this.addText + '\n' + v.addressId
							})
							// 主团队处理
							if(!this.pageData.mainCompany){
								this.pageData.mainCompany = {}
								this.pageData.mainCompany.companyName = '暂无主团队'
								this.pageData.mainCompany.organizationCode = '暂无组织机构代码'
								this.pageData.mainCompany.registeredAddress = '暂无服务地址'
								this.pageData.mainCompany.companyLogo = ''
							}
							
							
							
							// 就职记录
							this.takeTableData = this.pageData.companyEntityList
							// 当前被审核对象的userID
							this.postData.id = this.pageData.userId
						}
					}
				})
			},
			getDepartmentByCompanyId() {
				// 获取当前操作公司下的所有子部门
				this.$request.postForm(this.$api.getDepartmentByCompanyId, {
					companyId: this.companyId
				}).then(res => {
					if (res.code == 200) {
						this.companyDataList = res.data
					}
				})
			},
			auditPass() {
				// 审核通过
				this.$confirm('通过用户申请请求', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// if (!this.postData.departmentId) {
					// 	this.$message.error('请选择加入部门')
					// 	return
					// }
					this.btnDisabled = true
					this.$request.postForm(this.$api.approved, this.postData).then(res => {
						if (res.code == 200) {
							this.$message.success('操作成功')
							this.btnDisabled = false
							setTimeout(() => {
								this.$router.back()
							}, 300)
						}
					})
				})
			},
			auditNotGo() {
				// 审核不通过
				this.$confirm('确定不通过该用户的申请请求吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.btnDisabled = true
					this.postData.departmentId = ''
					this.$request.postForm(this.$api.refuse, this.postData).then(res => {
						if (res.code == 200) {
							this.$message.success('操作成功')
							this.btnDisabled = false
							setTimeout(() => {
								this.$router.back()
							}, 300)
						}
					})
				})

			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb {
		padding: 20px;
		border-bottom: 1px solid #DCDCDC;
		color: #333333;
		font-size: 16px;
	}

	.breadcrumb span {
		cursor: pointer;
	}

	.pageContent {
		padding: 20px;
		/* padding-right: 75px; */
	}

	/* .contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 120px;
		text-align: right;
		margin-bottom: 20px;
	}

	.contentHeader::after {
		content: '';
		width: 725px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 140px;
	} */
	.contentHeader {
		width: 100%;
		padding: 10px 20px;
		color: #333333;
		font-size: 16px;
		background: #F3F3F3;
		margin-bottom: 20px;
	}

	.teamType {
		width: 80%;
		margin-left: 10%;
		justify-content: space-evenly;
		margin-bottom: 60px;
	}

	.typeList {
		width: 100px;
		height: 110px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		padding: 20px;
		cursor: pointer;
	}

	.typeListImage {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}

	.typeList:hover {
		border-color: #23B14D;
	}

	.ainput {
		width: 478px;
	}

	.aainput {
		width: 450px;
		margin-left: 10px;
	}

	.ael-form-item>>>.el-form-item__label {
		width: 100px !important;
	}

	.InformationUploadTip {
		padding-left: 14rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}

	.InformationUploadTip span {
		color: #F31A1A;
		margin: 0 10px;
	}

	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.rankPhotosListBox {
		width: 210px;
		height: 138px;
		border: 1px solid #DCDCDC;
		position: relative;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}

	.InformationUpload {
		margin-right: 0;

	}

	.InformationUploadBtn {
		width: 210px;
		height: 138px;
	}

	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}

	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}

	.basicInformation {
		margin-bottom: 60px;
	}

	.renzhengImgs {
		width: 100px;
		height: 100px;
		/* margin-right: 75px; */
		border-radius: 3px;
		/* float: right; */
	}

	.hanlderBtns {
		width: 100%;
		border-top: 1px solid #DCDCDC;
		padding: 40px;
		text-align: center;
	}

	.hanlderBtnsFunc {
		width: 150px;
		margin: 0 55px;
	}

	.InformationImgs {
		width: 210px;
		height: 138px;
	}

	.demo-form-inline>>>.el-textarea__inner {
		height: 150px !important;
	}
</style>
